<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理系统</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5', // 主色调：深紫色
                        secondary: '#6366F1', // 次要色调
                        success: '#10B981', // 成功状态色
                        danger: '#EF4444',  // 危险/删除状态色
                        neutral: '#64748B'  // 中性色
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-effect {
                @apply transform transition-all duration-200 hover:scale-105 active:scale-95;
            }
            .fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }
            .slide-in {
                animation: slideIn 0.3s ease-out;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from { transform: translateY(-10px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-5xl">
    <!-- 头部区域 -->
    <header class="mb-8 slide-in">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div>
                <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-primary mb-2">
                    <i class="fa fa-tasks mr-2"></i>任务管理系统
                </h1>
                <p class="text-gray-500">高效管理您的日常任务和项目</p>
            </div>

            <!-- 用户信息区域 -->
            <div class="user-info bg-white px-4 py-2 rounded-lg shadow-sm flex items-center gap-2 self-end md:self-auto">
                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                    <i class="fa fa-user"></i>
                </div>
                <span class="text-gray-700" th:text="'欢迎, ' + ${session.username}">欢迎, 用户</span>
            </div>
        </div>
    </header>

    <!-- 错误消息显示 - 同时处理model中的error和URL参数中的error -->
    <div th:if="${error != null or param.error != null}"
         class="error-message bg-red-50 border-l-4 border-danger text-danger p-4 rounded-md mb-6 transform transition-all duration-500 opacity-100 fade-in">
        <div class="flex items-center gap-3">
            <i class="fa fa-exclamation-circle text-lg"></i>
            <p class="text-sm font-medium" th:text="${error != null ? error : param.error}">错误消息将显示在这里</p>
        </div>
    </div>

    <!-- 添加任务表单 - 与后端/add路径匹配 -->
    <form class="task-form bg-white p-6 rounded-xl shadow-md mb-8 transition-all duration-300 hover:shadow-lg fade-in"
          th:action="@{/tasks/add}" method="post">
        <h2 class="text-xl font-semibold mb-4 text-gray-700">添加新任务</h2>
        <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
            <div class="md:col-span-6">
                <label for="taskName" class="block text-sm font-medium text-gray-700 mb-1">任务名称 <span class="text-danger">*</span></label>
                <input type="text" name="taskName" id="taskName"
                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none"
                       placeholder="输入任务名称" required>
            </div>
            <div class="md:col-span-4">
                <label for="content" class="block text-sm font-medium text-gray-700 mb-1">任务内容</label>
                <input type="text" name="content" id="content"
                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none"
                       placeholder="添加任务详情（可选）">
            </div>
            <div class="md:col-span-2 flex items-end">
                <button type="submit"
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2.5 px-4 rounded-lg transition-all btn-effect flex items-center justify-center gap-2">
                    <i class="fa fa-plus"></i> 添加
                </button>
            </div>
        </div>
    </form>

    <!-- 任务列表 -->
    <div class="task-list fade-in">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold text-gray-700 flex items-center gap-2">
                <i class="fa fa-list-alt text-primary"></i> 我的任务
            </h2>
            <span class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-full" th:text="${tasks.size()} + ' 个任务'">0 个任务</span>
        </div>

        <!-- 无任务状态 -->
        <div th:if="${#lists.isEmpty(tasks)}" class="bg-white p-8 rounded-xl shadow-sm text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4">
                <i class="fa fa-check-circle text-2xl text-primary"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-700 mb-2">暂无任务</h3>
            <p class="text-gray-500">添加您的第一个任务，开始高效管理您的时间</p>
        </div>

        <!-- 任务列表项 - 与后端删除路径匹配 -->
        <div class="space-y-3">
            <div th:each="task : ${tasks}" class="task-item bg-white p-4 rounded-xl shadow-sm card-hover" th:attr="data-task-id=${task.id}">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div class="task-info flex-1">
                        <div class="flex items-start gap-3">
                            <!-- 任务复选框 -->
                            <div class="mt-0.5">
                                <div class="w-5 h-5 rounded-full border-2 border-gray-300 cursor-pointer hover:border-primary transition-all flex items-center justify-center task-checkbox">
                                    <i class="fa fa-check text-white text-xs opacity-0 transition-opacity"></i>
                                </div>
                            </div>

                            <!-- 任务信息 -->
                            <div>
                                <h3 class="font-medium text-gray-800 task-title" th:text="${task.taskName}">任务名称</h3>
                                <p class="text-sm text-gray-500 mt-1" th:text="${task.content}">任务内容详情</p>
                                <p class="text-xs text-gray-400 mt-2 flex items-center gap-1">
                                    <i class="fa fa-clock-o"></i>
                                    <span th:text="${#dates.format(task.createdTime, 'yyyy-MM-dd HH:mm')}">2023-06-01 12:00</span>
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- 删除按钮 - 与后端/delete/{id}路径匹配 -->
                    <form th:action="@{/tasks/delete/{id}(id=${task.id})}" method="post" class="self-start md:self-center">
                        <button type="submit" class="delete-btn bg-red-50 hover:bg-red-100 text-danger px-3 py-1.5 rounded-lg text-sm transition-all btn-effect flex items-center gap-1">
                            <i class="fa fa-trash-o"></i> 删除
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="mt-12 py-6 border-t border-gray-200">
    <div class="container mx-auto px-4 max-w-5xl text-center text-gray-500 text-sm">
        <p>© 2023 任务管理系统 - 让您的工作更高效</p>
    </div>
</footer>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 处理错误消息 - 同时支持model中的error和URL参数中的error
        const errorMessage = document.querySelector('.error-message');
        if (errorMessage) {
            // 3秒后自动隐藏错误消息
            setTimeout(function() {
                errorMessage.style.opacity = '0';
                setTimeout(function() {
                    errorMessage.style.display = 'none';
                }, 500);
            }, 3000);
        }

        // 表单提交验证 - 与后端验证呼应
        document.querySelector('.task-form').addEventListener('submit', function(e) {
            const taskInput = this.querySelector('input[name="taskName"]');
            if (!taskInput.value.trim()) {
                e.preventDefault();

                // 创建友好的验证提示
                let errorDiv = taskInput.nextElementSibling;
                if (!errorDiv || !errorDiv.classList.contains('bg-red-50')) {
                    errorDiv = document.createElement('div');
                    errorDiv.className = 'bg-red-50 text-danger text-sm p-2 mt-1.5 rounded-md fade-in';
                    errorDiv.textContent = '任务名称不能为空！';
                    taskInput.parentNode.insertBefore(errorDiv, taskInput.nextSibling);

                    // 添加输入框错误状态
                    taskInput.classList.add('border-danger', 'focus:ring-danger/20', 'focus:border-danger');

                    // 3秒后自动移除错误提示
                    setTimeout(() => {
                        errorDiv.remove();
                        taskInput.classList.remove('border-danger', 'focus:ring-danger/20', 'focus:border-danger');
                    }, 3000);
                }
            }
        });

        // 任务完成交互功能
        document.querySelectorAll('.task-checkbox').forEach(checkbox => {
            checkbox.addEventListener('click', function() {
                // 切换复选框状态
                this.classList.toggle('bg-primary');
                this.classList.toggle('border-primary');

                // 显示/隐藏勾选图标
                const checkIcon = this.querySelector('i');
                checkIcon.classList.toggle('opacity-100');

                // 更新任务标题样式（添加删除线）
                const taskTitle = this.closest('.task-item').querySelector('.task-title');
                taskTitle.classList.toggle('line-through');
                taskTitle.classList.toggle('text-gray-400');
            });
        });

        // 删除确认 - 与后端删除操作呼应
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                const taskItem = this.closest('.task-item');
                const taskId = taskItem.getAttribute('data-task-id');
                const taskName = taskItem.querySelector('.task-title').textContent;

                if (!confirm(`确定要删除任务"${taskName}"吗？`)) {
                    e.preventDefault();
                }
            });
        });

        // 页面加载动画
        document.querySelectorAll('.fade-in').forEach((el, index) => {
            el.style.animationDelay = `${index * 0.1}s`;
        });
    });
</script>
</body>
</html>
